@charset "utf-8";
/* variable define */
$font8: 0.8rem;
$font10: 1rem;
$font12: 1.2rem;
$font13: 1.3rem;
$font14: 1.4rem;
$font16: 1.6rem;
$font18: 1.8rem;
$font20: 2rem;
$font22: 2.2rem;
$font24: 2.4rem;
$font26: 2.6rem;
$font28: 2.8rem;
$font30: 3rem;
$font32: 3.2rem;
$font34: 3.4rem;
$font36: 3.6rem;
$font38: 3.8rem;
$font40: 4rem;

@mixin t-o($value) {
	width: $value;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

@mixin t-o-m($value) {
	max-width: $value;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

@mixin t-o-ml($width, $lines) {
	width: $width;
	-webkit-line-clamp: $lines;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
//******************************************
//flex布局
//分三个版本：
//旧版本:IE和opera都不支持，没有必要写前缀（old）
//混合版本：一直以来只有IE10才支持(hybird)
//新版本：iso6下safari浏览器不支持(new)
//******************************************
/**
 * flex盒子
 */
@mixin flexDisplay{
	display:-moz-box;
	display:-webkit-box;
	display:box;//old
	display:-ms-flexbox;
	display:flexbox; //hybird
	display:-webkit-flex;
	display:flex;
}
/**
 * 伸缩流方向
 * @param: row | row-reverse | column | column-reverse
 */
@mixin flexDirectionForOld($direction){
	@if $direction == row { //old版本还有 inline-axis | block-axis，暂不考虑
		-webkit-box-orient:horizontal ;
		-moz-box-orient:horizontal ;
		box-orient:horizontal;
	} @else if $direction == column {
		-webkit-box-orient:vertical ;
		-moz-box-orient:vertical ;
		box-orient:vertical;
	} @else if $direction == row-reverse{
		-webkit-box-orient:horizontal ;
		-moz-box-orient:horizontal ;
		box-orient:horizontal;
		-webkit-box-direction: reverse;
		-moz-box-direction: reverse;
		box-direction: reverse;
	} @else{
		-webkit-box-orient:vertical ;
		-moz-box-orient:vertical ;
		box-orient:vertical;
		-webkit-box-direction: reverse;
		-moz-box-direction: reverse;
		box-direction: reverse;
	}
}
@mixin flexDirection($direction){
	@include flexDirectionForOld($direction);
	-ms-flex-direction:$direction;
	-webkit-flex-direction:$direction;
	flex-direction:$direction;

}
/**
 * 缩换行
 * @param: nowrap | wrap | wrap-reverse
 */
@mixin flexWrapForOld($param){
	@if $param == nowrap { //box-lines好像没有浏览器支持
		-moz-box-lines: single;
		-webkit-box-lines: single;
		box-lines: single;
	} @else if $param == wrap{
		-moz-box-lines: multiple;
		-webkit-box-lines: multiple;
		box-lines: multiple;
	} @else{
		//box-lines没有wrap-reverse的对应项
		//TODO：旧版本可以通过侧轴的end实现，要不要加上，补充在这里呢？？？
	}
}
@mixin flexWrap($param){
	@include flexWrapForOld($param);
	-ms-flex-wrap:$param;
	-webkit-flex-wrap:$param;
	flex-wrap:$param;
}
/**
 * 伸缩流方向与换行，混合版本新增的，old版本木有
 * @param:  、
 */
@mixin flexFlow($paramA,$paramB){
	-ms-flex-flow: $paramA,$paramB;
	flex-flow: $paramA,$paramB;
	-moz-flex-flow: $paramA,$paramB;
	//老版本进行组合
	@include flexDirectionForOld($paramA);
	@include flexWrapForOld($paramB);
}

/**
 * 主轴对齐
 * @param flex-start | flex-end | center | space-between | space-around
 */
@mixin flexJustifyContentForOldAndHybird($param){
	@if $param == flex-start {
		-webkit-box-pack: start;
		-moz-box-pack: start;
		box-pack: start; // old
		-ms-flex-pack:start;
		flex-pack:start; //hybird
	} @else if $param == flex-end{
		-webkit-box-pack: end;
		-moz-box-pack: end;
		box-pack: end;
		-ms-flex-pack:end;
		flex-pack:end;
	}@else if $param == center{
		-webkit-box-pack: center;
		-moz-box-pack: center;
		box-pack: center;
		-ms-flex-pack:center;
		flex-pack: center;
	}@else{ //老版本没有space-around效果，混合版本没有space-between效果，相互替代
		-webkit-box-pack: justify;
		-moz-box-pack: justify;
		box-pack: justify;
		-ms-flex-pack:distribute;
		flex-pack: distribute;
	}
}
@mixin flexJustifyContent($param){
	@include flexJustifyContentForOldAndHybird($param);
	-webkit-justify-content: $param;
	justify-content: $param;
}

/**
 * 侧轴对齐
 * @param flex-start | flex-end | center | baseline | stretch
 */
@mixin flexAlignItemsForOldAndHybird($param){
	@if $param == flex-start {
		-webkit-box-align: start;
		-moz-box-align: start;
		box-align: start; // old
		-ms-flex-pack:start;
		flex-pack:start; //hybird
	} @else if $param == flex-end{
		-webkit-box-align: end;
		-moz-box-align: end;
		box-align: end;
		-ms-flex-align:end;
		flex-align:end;
	}@else{//当box-orient值为vertical，ox-align取baseline时，webkit内核以center方式显示，firefox却以start方式显示
		-webkit-box-align: $param;
		-moz-box-align: $param;
		box-align: $param;
		-ms-flex-align:$param;
		flex-align: $param;
	}
}
@mixin  flexAlignItems($param){
	@include flexAlignItemsForOldAndHybird($param);
	-webkit-align-items: $param;
	align-items: $param;
}

/**
 * 堆栈伸缩行 old版本没有该属性，前提：flex-wrap:wrap;
 * @param flex-start | flex-end | center | space-between | space-around | stretch
 */
@mixin flexAlignContenForHybird($param){
	@if $param == flex-start{
		-ms-flex-line-pack:start;
		flex-line-pack:start;
	} @else if $param == flex-end{
		-ms-flex-line-pack:end;
		flex-line-pack:end;
	}@else if $param == center {
		-ms-flex-line-pack: center;
		flex-line-pack: center;
	}@else if $param == space-between {
		-ms-flex-line-pack:justify;
		flex-line-pack: justify;
	}@else if $param == space-around {
		-ms-flex-line-pack:distribute;
		flex-line-pack: distribute;
	}@else{
		-ms-flex-line-pack:$param;
		flex-line-pack: $param;
	}
}
@mixin flexAlignConten($param){
	@include flexAlignItemsForOldAndHybird($param);
	-webkit-webkit-align-content: $param;
	align-content: $param;
}
/**
 * 伸缩性 强制三个参数，或者1个参数，不允许两个参数 不推荐这种方式
 * @param  ,,
 */
@mixin flex_slt($grow,$shrink:1,$basis:auto){
	-webkit-box-flex: $grow;
	-moz-box-flex: $grow;
	box-flex: $grow; //old 注意点：如果定宽的盒子声明某个方向的margin为auto,那么它会占据100%的空间，坑。
	@if($grow == none){
		-ms-flex:none;//hybird,压缩属性不能为负值
		-webkit-flex:none;
		flex:none;
	}@else{
		-ms-flex:$grow $shrink $basis;
		-webkit-flex:$grow $shrink $basis;
		flex:$grow $shrink $basis;
	}
}
@mixin flex($grow){//只有一个属性的时候
	-webkit-box-flex: $grow;
	-moz-box-flex: $grow;
	box-flex: $grow; //old 注意点：如果定宽的盒子声明某个方向的margin为auto,那么它会占据100%的空间，坑。
	@if($grow == none){
		-ms-flex:none;//hybird,压缩属性不能为负值
		-webkit-flex:none;
		flex:none;
	}@else{
		-ms-flex:$grow;
		-webkit-flex:$grow;
		flex:$grow;
	}
}
@mixin flexGrow($grow){
	-webkit-box-flex: $grow;
	-moz-box-flex: $grow;
	box-flex: $grow; //old 注意margin
	-ms-flex:$grow; //为了兼容，old和hybird不支持分写
	-webkit-webkit-flex-grow: $grow;
	flex-grow: $grow;
}
@mixin flexShrink($shrink){ //只有最新版才有此属性
	-webkit-webkit-flex-grow: $shrink;
	flex-grow: $shrink;
}




/**
 * 显示顺序
 * @param*/
@mixin Order($num){//默认值1
	-webkit-box-ordinal-group: $num;
	-moz-box-ordinal-group: $num;
	box-ordinal-group: $num; //old
	-ms-flex-order:$num;
	flex-order:$num;// hybird
	-webkit-order:$num;
	order:$num;

}
